<template>
  <div class="profile-container">
    <el-card class="box-card">
      <div style="text-align: center;">
        <el-avatar :size="80" :src="user.avatar || defaultAvatar" />
        <h2>{{ user.username }}</h2>
      </div>

      <el-form label-position="top" :model="user">
        <el-form-item label="用户名">
          <el-input v-model="user.username" disabled />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="maskedPassword" type="password" disabled />
        </el-form-item>
      </el-form>

      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="showPwdDialog = true">修改密码</el-button>
        <el-button type="danger" @click="logout">退出登录</el-button>
      </div>
    </el-card>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="showPwdDialog" title="修改密码">
      <el-form :model="passwordForm" label-width="80px">
        <el-form-item label="原密码">
          <el-input v-model="passwordForm.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.newPassword" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPwdDialog = false">取消</el-button>
        <el-button type="primary" @click="updatePassword">确定</el-button>
      </template>
    </el-dialog>

    <!-- 上传头像 -->
     <el-upload
        class="avatar-uploader"
        action="/api/user/uploadAvatar"
        :data="{ username: user.username }"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :headers="{ Authorization: 'Bearer ' + userStore.token }"
    >
  <img v-if="user.avatar" :src="user.avatar" class="avatar" />
  <el-icon v-else><Plus /></el-icon>
</el-upload>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import axios from 'axios'

const userStore = useUserStore()
const router = useRouter()

const user = ref({
  username: '',
  password: '',
  avatar: ''
})
const defaultAvatar = '/images/default-avatar.png'

const maskedPassword = ref('******')
const showPwdDialog = ref(false)
const passwordForm = ref({
  oldPassword: '',
  newPassword: ''
})

// 获取用户信息
onMounted(async () => {
  const username = userStore.name
  const token = userStore.token
  const res = await axios.get(`/api/user/info?username=${username}`, {
    headers: { Authorization: `Bearer ${token}` }
  })
  if (res.data.success) {
    user.value = res.data.data
  }
})

// 修改密码
const updatePassword = async () => {
  const res = await axios.post('/api/user/updatePassword', {
    username: user.value.username,
    oldPassword: passwordForm.value.oldPassword,
    newPassword: passwordForm.value.newPassword
  })
  if (res.data.success) {
    ElMessage.success('密码修改成功')
    showPwdDialog.value = false
  } else {
    ElMessage.error(res.data.message)
  }
}

// 退出登录
const logout = () => {
  userStore.clearUserInfo()
  localStorage.clear()
  sessionStorage.clear()
  alert('成功退出登录')
  router.push('/')
}
</script>

<style scoped>
.profile-container {
  max-width: 500px;
  margin: auto;
  padding-top: 40px;
}
</style>
